<template>
  <div style="width: 100%">
    <VGroup :style="style">
      <el-select
        class="select"
        v-if="options.length"
        :style="selectStyle"
        v-model="modelValue.type"
        v-bind="_options"
        :class="options.length < 2 ? 'disabled-select' : ''"
        :disabled="options.length < 2"
      >
        <el-option v-for="n in options" :key="n.value" :label="n.label" :value="n.value" />
      </el-select>
      <slot :modelValue="modelValue"></slot>
    </VGroup>
  </div>
</template>
<script setup>
const props = defineProps({
  modelValue: { type: [Object, String, Number], default: () => ({}) },
  field: { type: String, default: "" },
  options: { type: Array, default: () => [] },
  style: { type: [Object, String], default: () => ({}) },
  selectStyle: { type: [Object, String], default: () => ({}) },
  defaultSelect: { type: Boolean, default: true },
  itemProps: { type: Object, default: () => ({}) },
})

const _options = computed(() => {
  const option = {
    placement: "bottom",
    multiple: false,
  }
  return Object.assign(option, props?.itemProps)
})
</script>
<style lang="scss" scoped>
:deep(.disabled-select) {
  .el-input__suffix {
    display: none;
  }
  .el-input.is-disabled {
    .el-input__wrapper {
      background: #fff;
    }
    .el-input__inner {
      cursor: auto !important;
      color: #333;
      -webkit-text-fill-color: #333;
    }
  }
}
.v-group {
  :deep(.el-select__wrapper) {
    border-radius: 4px 0 0 4px;
    overflow: hidden;
  }
  :deep(.el-textarea__inner) {
    min-height: 32px !important;
    border-radius: 0 4px 4px 0;
  }
  :deep(.number-wrap) {
    height: 32px !important;
  }
  :deep(.select) {
    .el-select__wrapper {
      // color: #333;
      // background: #fafafa;
      background: var(--base-small-bg-color);

      // background: #fafafa;
    }
  }
}
</style>
